<template>
  <div class="slide-switch" ref="width">
    <div class="back" 
      :style="{width: backWidth + 'px', left: backWidth * index + 'px'}"></div>
    <div class="text">
      <div class="textItem" 
        v-for="(item, i) in data" 
        :key="i"
        @click="setIndex(item,i)"
        :class="{checked:i==index&&zf==true}"
        :style="{color: item.color || '#888787'}" >
        {{item.label}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'slide-switch',
  data(){
    return {
      backWidth: 0,
      index: 0,
    }
  },
  mounted(){
    this.$nextTick(function(){
      let count = this.data.length
      requestAnimationFrame(() => {
        let width = this.$refs.width.clientWidth
        this.backWidth = width / count
      })
    })
  },
  watch:{
    data:{
      handler:function(val,oldVal){
        let count = this.data.length
        requestAnimationFrame(() => {
          let width = this.$refs.width.clientWidth
          this.backWidth = width / count
        })
      },
      deep:true
    },
  },
  props: ['data','zf'],
  methods: {
    setIndex(item,i){
      this.index = i
      let name = item.label.substr(0,3)
      if (name=='最新') {
        this.$emit('Newest')
      }else if(name=='负面'){
        this.$emit('negative')
      }else if (name=='负面:') {
        this.$emit('getdown')
      }else if(name=='正面:'){
        this.$emit('getface')
      }else if(name=='中性:'){
        this.$emit('getmoddle')
      }
    }
  }
}
</script>

<style scoped>
.slide-switch{
  background: #f8f8f8;
  height: 2.06rem;
  line-height: 2.06rem;
  border: 1px solid #ececec;
  border-radius: 1.03rem;
  position: relative;
}
.checked{
  color: #565656 !important;
}
.back{
  position: absolute;
  top: 0;
  left: 0;
  height: 2.06rem;
  border-radius: 1.03rem;
  background-color: white;
  /* box-shadow: 0 0.31rem 0.62rem rgba(0,0,0,0.1); */
  border: 1px solid #ececec; 
  transition: all .3s ease;
}
.text{
  position: relative;
}
.textItem{
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  color: #888780;
  padding: 0 1.75rem;
  transition: all .3s ease;
}
</style>
